<template>
  <div id="header">
    <div class="grid-content bg-purple-light">
      <ul class="navList-left">
        <li v-for="(item,index) of navList" :key="index">
          <a href="javscript:;">{{item.name}}</a>
        </li>
      </ul>
      <ul class="navList-right">
        <li v-for="(item,index) of navListRight" :key="index">
          <a href="javscript:;">{{item.name}}</a>
        </li>
        <li class="el-dropdown-wrap">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-shopping-cart-2 el-icon--right"></i>
              购物车（0）
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        {
          name: "小米商城",
          href: ""
        },
        {
          name: "MIUI",
          href: ""
        },
        {
          name: "IoT",
          href: ""
        },
        {
          name: "云服务",
          href: ""
        },
        {
          name: "金融",
          href: ""
        },
        {
          name: "有品",
          href: ""
        },
        {
          name: "小爱开放平台",
          href: ""
        },
        {
          name: "企业团购",
          href: ""
        },
        {
          name: "资质证照",
          href: ""
        },
        {
          name: "协议规则",
          href: ""
        },
        {
          name: "下载app",
          href: ""
        },
        {
          name: "Select Location",
          href: ""
        }
      ],
      navListRight: [
        {
          name: "登录",
          href: ""
        },
        {
          name: "注册",
          href: ""
        },
        {
          name: "消息通知",
          href: ""
        }
      ]
    };
  }
};
</script>
<style scoped>
#header {
  width: 100%;
  box-sizing: border-box;
  background-color: #333333;
}
.bg-purple-light {
  width: 1240px;
  margin: 0 auto;
}
/* 导航样式公用 */
.navList-right,
.navList-left {
  list-style: none;
  padding: 0;
  margin: 0;
}
.navList-right li,
.navList-left li {
  float: left;
  padding: 0 10px;
  font-size: 0.875rem;
  line-height: 40px;
}
.navList-right li a,
.navList-left li a {
  color: #ccc;
  text-decoration: none;
}

/* 导航栏右侧 */
.navList-right {
  float: right;
}
.el-menu-item {
  height: 100%;
  font-size: 0.75rem;
  line-height: 40px;
}
.el-menu-item:hover {
  color: #fff;
}
/* 购物车下拉 */
.el-dropdown-wrap {
  text-align: center;
  background: #424242 !important;
}
.el-dropdown-menu {
  width: 18.75rem;
}
.el-dropdown-link {
  color: #908f90;
  font-size: 12px;
}
.el-icon--right {
  color: #908f90;
  font-weight: 900;
  font-size: 18px;
}
.popper__arrow::after {
  display: none;
}
</style>